<script setup lang="ts">
import { ApiTaskDetails, apiAddtaskRePlay } from "@@/api/wk/index";
import pay from "@@/views/wk-addTask/components/pay.vue";
import { computeAddTaskPlayInfo } from "@@/views/wk-addTask/components/mix";
import useTabPageStore from "@@/store/useTabPageStore";
import useBalanceStore from "@@/store/useBalanceStore";
import router from "@@/router";

const props = defineProps<{
  details: ApiTaskDetails.Data;
}>();

const tabPageStore = useTabPageStore();
const balanceStore = useBalanceStore();
const btnLoading = reactive({
  rePay: false,
});
async function rePay() {
  btnLoading.rePay = true;
  const WKC = balanceStore.getCoinByCode("WKC");
  await Promise.all([
    tabPageStore.getHomeData(),
    balanceStore.findBalance(WKC),
  ]);
  btnLoading.rePay = false;
  const details = props.details;
  payRef.value?.open(
    computeAddTaskPlayInfo({
      capital: details.capital,
      commission: details.commission,
      details: details.details,
      images: "",
      introduction: details.introduction,
      order_limit_time: details.order_limit_time.toString(),
      txid: details.txid,
    })
  );
}
const payRef = ref<InstanceType<typeof pay>>();
async function playSuccess(txid: string) {
  const verify = await apiAddtaskRePlay({ task_id: props.details.id, txid });
  if (verify) return router.back();
}
</script>

<template>
  <pay ref="payRef" @play-success="playSuccess" />
  <div class="C-fail T-A-C T-S-sm">
    {{ $t("caoZuoSuoXuZiJinZhiFuChuCuoQingZhongXinZhiFu") }}
  </div>
  <Rbutton
    @click="rePay"
    :loading="btnLoading.rePay"
    bg="var(--C-LG1)" borderStyle="none"
    :size="'large'"
  >
    {{ $t("zhongXinZhiFu") }}
  </Rbutton>
</template>

<style lang="scss" scoped></style>
